@import '../../style/themes';
@import '../../style/mixins';

@mixin border($color) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: $border-base;
  border-color: $color;
  // border-color: rgba(#000, .4);
}
@mixin button-hollow-status($text-color, $border-color) {
  background: none;
  color: $text-color;
  &:hover {
    background: none;
    color: colorPalette($text-color, 5);
    border-color: colorPalette($border-color, 5);
  }
  &:active {
    background: none;
    color: colorPalette($text-color, 7);
    border-color: colorPalette($border-color, 7);
  }
}
@mixin button-status($bg) {
  color: $bg;
  background: $bg;
  &::after {
    content: ' ';
    @include border($bg);
    border-color: $bg;
    border-width: 0;
    pointer-events: none;
  }
  &:hover {
    $c: none;
    @if $theme != dark {
      $c: further($bg, 8);
    } @else {
      $c: further($bg, 6);
    }
    color: $c;
    &::after {
      @include border($c);
    }
  }
  &:active {
    @if $theme != dark {
      background: further($bg, 7.3);
    } @else {
      background: further($bg, 5);
    }
    &::after {
      border-width: 0;
    }
  }
}

$btn: x-btn;

.#{$btn} {
  @include reset-component();

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: $btn-height;
  padding: 0 15px;
  font-size: 14px;
  line-height: 1.5715;
  border: 0;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  border-radius: 0;
  text-decoration: none;
  // transition: transform .3s;
  
  &-default {
    @include button-status($btn-default-color);
  }
  &-primary {
    @include button-status($primary-color);
  }
  &-danger {
    @include button-status($error-color);
  }
  &-warning {
    @include button-status($warning-color);
  }
  &-success {
    @include button-status($success-color);
  }
  &-default {
    &:not(.#{$btn}-ghost, .#{$btn}-link) {
      color: $text-color;
    }
  }
  &-primary, &-success, &-danger, &-warning, &-info {
    &:not(.#{$btn}-ghost, .#{$btn}-link) {
      color: $white;
    }
  }
  &-default.#{$btn}-ghost {
    @if $theme != dark {
      @include button-status($btn-default-color);
    } @else {
      @include button-status(gray);
    }
  }
  &-ghost {
    background: #0000 !important;
    &::after {
      border-width: 2px !important;
    }
  }
  &-dashed {
    @extend .#{$btn}-ghost;
    &::after {
      border-style: dashed !important;
    }
  }

  &-default.#{$btn}-link {
    @if $theme != dark {
      
    } @else {
      color: gray;
    }
  }
  &-link {
    border: 0;
    background: transparent !important;
    cursor: pointer;
    &:hover {
      color: further($gray, 7);
    }
    &:active {
      color: further($gray, 5.5);
    }
    &::after {
      border-width: 0 !important;
    }
  }

  &-round {
    border-radius: 40px;
    &::after {
      border-radius: inherit;
    }
  }
  &-circle {
    width: 40px;
    height: 40px;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    &::after {
      border-radius: inherit;
    }
  }
  &-block {
    width: 100%;
  }

  &-disabled {
    opacity: .55;
    filter: grayscale(40%);
    pointer-events: none;
    >* {
      pointer-events: none;
    }
  }
  
  &_icon {
    margin-right: $margin-xs;
  }

  &-only-icon {
    .#{$btn}_icon {
      margin-right: 0;
    }
  }
}